<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>睿云 让生活更美好！</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <!-- 引入组件库 -->
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
    <script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../../static/js/filter.js" th:src="@{/js/filter.js}"></script>
</head>
<body>

<div id="app" v-cloak>
    <div class="main-content">
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">订单详情</h1>
            <div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>订单详情</div>
        </div><!-- 页面头部 end -->
        <div class="main-content-body">
            <!-- 订单头部 -->
            <div class="order-header">
                <div class="order-slide">
                    <p class="order-desc">订单号：{{order.entityNo}}</p>
                    <h1 class="order-state">{{order.stateName}}-{{order.payStateName}}</h1>
                    <div class="order-btn">
                        <el-button>打 印</el-button>
                        <el-button type="primary" v-if="order.state!=1 && order.state!=-1 && order.payState==1" @click="gathering(order.payPrice)">收 款</el-button>
                        <el-button type="primary" v-if="order.state==1" @click="receive(order.uuid)">接 单</el-button>
                        <el-button type="primary" v-if="order.eatType==1 && order.payState==2 && order.state==2" @click="finish(order.uuid)">完 成</el-button>
                        <el-button type="primary" v-if="order.eatType==2 && order.state==2" @click="delivery(order.uuid)">派 送</el-button>
                        <el-button type="primary" v-if="order.eatType==2 && order.payState==2 && order.state==3" @click="arrived(order.uuid)">送 达</el-button>
                        <el-button type="text" v-if="order.state!=-1 && order.state!=4 && order.state!=5" @click="cancel(order.payState, order.payType)">取 消</el-button>
                    </div>
                </div>
                <div class="order-main">
                    <div class="order_line" v-if="order.eatType==1 && order.state==1 && order.payState==1">
                        <span class="items active">
                            <p>已下单</p>
                            <s></s>
                            <label>{{order.createTime}}</label>
                        </span>
                        <span class="items">
                            <p>待接单</p>
                            <s></s>
                        </span>
                        <span class="items">
                            <p>待完成</p>
                            <s></s>
                        </span>
                    </div>
                    <div class="order_line" v-if="order.eatType==1 && order.state==2 && order.payState==1">
                        <span class="items active">
                            <p>已下单</p>
                            <s></s>
                            <label>{{order.createTime}}</label>
                        </span>
                        <span class="items active">
                            <p>已接单</p>
                            <s></s>
                            <label>{{order.receiveTime}}</label>
                        </span>
                        <span class="items">
                            <p>待完成</p>
                            <s></s>
                        </span>
                    </div>
                    <div class="order_line" v-if="order.eatType==1 && order.state==4 && order.payState==2">
                        <span class="items active">
                            <p>已下单</p>
                            <s></s>
                            <label>{{order.createTime}}</label>
                        </span>
                        <span class="items active">
                            <p>已接单</p>
                            <s></s>
                            <label>{{order.receiveTime}}</label>
                        </span>
                        <span class="items active">
                            <p>已完成</p>
                            <s></s>
                            <label>{{order.finishTime}}</label>
                        </span>
                    </div>

                    <div class="order_line" v-if="order.eatType==2 && order.state==1 && order.payState==1">
                        <span class="items">
                            <p>待支付</p>
                            <s></s>
                        </span>
                        <span class="items">
                            <p>待接单</p>
                            <s></s>
                        </span>
                        <span class="items active">
                            <p>待派送</p>
                            <s></s>
                        </span>
                    </div>
                    <div class="order_line" v-if="order.eatType==2 && (order.state==2||order.state==3) && order.payState==1">
                        <span class="items">
                            <p>待支付</p>
                            <s></s>
                        </span>
                        <span class="items active">
                            <p>已接单</p>
                            <s></s>
                            <label>{{order.receiveTime}}</label>
                        </span>
                        <span class="items">
                            <p>待派送</p>
                            <s></s>
                        </span>
                    </div>
                    <div class="order_line" v-if="order.eatType==2 && order.state==5 && order.payState==1">
                        <span class="items">
                            <p>待支付</p>
                            <s></s>
                        </span>
                        <span class="items active">
                            <p>已接单</p>
                            <s></s>
                            <label>{{order.receiveTime}}</label>
                        </span>
                        <span class="items active">
                            <p>已送达</p>
                            <s></s>
                            <label>{{order.finishTime}}</label>
                        </span>
                    </div>
                    <div class="order_line" v-if="order.eatType==2 && order.state==1 && order.payState==2">
                        <span class="items active">
                            <p>已支付</p>
                            <s></s>
                            <label>{{order.payTime}}</label>
                        </span>
                        <span class="items">
                            <p>待接单</p>
                            <s></s>
                        </span>
                        <span class="items">
                            <p>待派送</p>
                            <s></s>
                        </span>
                    </div>
                    <div class="order_line" v-if="order.eatType==2 && order.state==2 && order.payState==2">
                        <span class="items active">
                            <p>已支付</p>
                            <s></s>
                            <label>{{order.payTime}}</label>
                        </span>
                        <span class="items active">
                            <p>已接单</p>
                            <s></s>
                            <label>{{order.receiveTime}}</label>
                        </span>
                        <span class="items">
                            <p>待派送</p>
                            <s></s>
                        </span>
                    </div>
                    <div class="order_line" v-if="order.eatType==2 && order.state==5 && order.payState==2">
                        <span class="items active">
                            <p>已支付</p>
                            <s></s>
                            <label>{{order.payTime}}</label>
                        </span>
                        <span class="items active">
                            <p>已接单</p>
                            <s></s>
                            <label>{{order.receiveTime}}</label>
                        </span>
                        <span class="items active">
                            <p>已送达</p>
                            <s></s>
                            <label>{{order.finishTime}}</label>
                        </span>
                    </div>
                </div>
            </div><!-- 订单头部 end -->
            <!-- 配送、订单信息 -->
            <el-row>
                <el-col :span="12" v-if="order.eatType==1">
                    <div class="view-title"><h2 class="title_h">就餐信息</h2></div>
                    <ul class="order-infolt">
                        <li>桌　　号：{{order.tableNo}}</li>
                        <li>就餐人数：{{order.personNum}}人</li>
                        <li>订单备注：{{order.note}}</li>
                    </ul>
                </el-col>
                <el-col :span="12" v-if="order.eatType==2">
                    <div class="view-title"><h2 class="title_h">配送信息</h2></div>
                    <ul class="order-infolt" v-if="order.orderAddress">
                        <li>收货地址：{{order.orderAddress.name}} {{order.orderAddress.mobile}} {{order.orderAddress.province}}{{order.orderAddress.city}}{{order.orderAddress.region}}{{order.orderAddress.address}}</li>
                        <li>就餐人数：{{order.personNum}}人</li>
                        <li>订单备注：{{order.note}}</li>
                    </ul>
                </el-col>
                <el-col :span="12">
                    <div class="view-title"><h2 class="title_h">订单信息</h2></div>
                    <ul class="order-infolt">
                        <li>
                            订单编号：<span id="copytext">{{order.entityNo}}</span>
                            <span class='ml_10 mr_10'>|</span>
                            <span class='fz_c' @click="copyUrl">复制</span>
                        </li>
                        <li>支付方式：{{order.payTypeName}}</li>
                        <li>下单时间：{{order.createTime}}</li>
                        <li>会员名称：{{order.customerName}}</li>
                    </ul>
                </el-col>
            </el-row>

            <!--主体表格-->
            <div class="view-title"><h2 class="title_h">商品明细</h2></div>
            <div class="z-tables">
                <div class="el-table">
                    <table class="el-table__header order-table" cellpadding="0" cellspacing="0" border="0" style="width:100%">
                        <thead>
                        <tr>
                            <th class="is-leaf z-opt_btn" width="45%"><div class="cell">商品详情</div></th>
                            <th class="is-leaf z-opt_btn" width="10%"><div class="cell">数量</div></th>
                            <th class="is-leaf z-opt_btn" width="15%"><div class="cell">单价</div></th>
                            <th class="is-leaf z-opt_btn" width="15%"><div class="cell">金额</div></th>
                            <th class="is-leaf z-opt_btn" width="15%"><div class="cell">商品状态</div></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="detail in order.detailList">
                            <td>
                                <ul class="order-product-list">
                                    <li>
                                        <div class="pic"><img :src="detail.productImg"></div>
                                        <div class="info">
                                            <div class="name">
                                                <h3>{{detail.productName}}</h3>
                                                <p class="desc" v-if="detail.showName">
                                                    <label>{{detail.showName}}</label>
                                                </p>
                                                <p class="sales" v-if="detail.couponPrice">菜品券：-￥{{detail.couponPrice|NumberFmt}}</p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </td>
                            <td>{{detail.buyNum}}</td>
                            <td>￥{{detail.productPrice|NumberFmt}}</td>
                            <td><p class="fc_red f_14"><strong>￥{{detail.productPrice*detail.buyNum|NumberFmt}}</strong></p></td>
                            <td>
                                <template v-if="2 == detail.state">
                                    {{detail.stateName}}
                                </template>
                                <template v-else>
                                    <p class="fz_c">{{detail.stateName}}</p>
                                </template>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="order-totle">
                <p v-if="order.eatType==1">餐具费：<span>￥{{order.tablewarePrice|NumberFmt}}</span></p>
                <p v-else>包装费：<span>￥{{order.tablewarePrice|NumberFmt}}</span></p>
                <p v-if="order.mjPrice>0">下单立减优惠：<span class="fz_c">-￥{{order.mjPrice|NumberFmt}}</span></p>
                <p v-if="order.ljPrice>0">新用户立减：<span class="fz_c">-￥{{order.ljPrice|NumberFmt}}</span></p>
                <p v-if="order.vendorCouponFreePrice>0">优惠券抵扣：<span class="fz_c">-￥{{order.vendorCouponFreePrice|NumberFmt}}</span></p>
                <p v-if="order.integralFree>0">积分抵扣：<span class="fz_c">-￥{{order.integralFree|NumberFmt}}</span></p>
                <p v-if="order.otherPrice>0">其他优惠：<span class="fz_c">-￥{{order.otherPrice|NumberFmt}}</span></p>
                <div class='totle_price'>
                    合计：<strong class="fc_red">￥{{order.payPrice|NumberFmt}}</strong>
                </div>
            </div>

            <div class="view-title"><h2 class="title_h">操作日志</h2></div>
            <el-table :data="order.logList" style="width: 100%;" class="table-log">
                <el-table-column prop="createTime" label="操作时间" min-width="130"></el-table-column>
                <el-table-column prop="operatorName" label="操作人员" min-width="110"></el-table-column>
                <el-table-column prop="operateLog" label="操作日志" min-width="140"> </el-table-column>
            </el-table>

            <div class="edit-button-fixed">
                <div class="edit-button">
                    <el-button type="primary" @click="goBack">返回</el-button>
                </div>
            </div>
        </div>
    </div>

    <!--收款弹出框-->
    <el-dialog title="收款" :visible.sync="gatheringDialogVisible" width="30%">
    <span>
        <span>收款金额：</span>
        <el-input v-model.number="payPrice" placeholder="请输入金额" style="width: 150px"></el-input>
    </span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="gatheringDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sureGathering">确 定</el-button>
    </span>
    </el-dialog>
    <!--退款弹出框-->
    <el-dialog title="退款" :visible.sync="refundDialogVisible" width="30%">
    <span>
        <span>退款金额：</span>
        <el-input v-model.number="refundPrice" placeholder="请输入金额" style="width: 150px"></el-input>
    </span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="refundDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sureRefund">确 定</el-button>
    </span>
    </el-dialog>
</div>

<script th:inline="javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            order:[[${order}]],
            payPrice: 0.00, //收款弹出框显示的收款价
            refundPrice: 0.00, //退款弹出框显示的价格
            gatheringDialogVisible:false, //收款弹出框
            refundDialogVisible:false, //退款弹出框
        },
        methods: {
            //收款
            gathering(payPrice) {
                this.payPrice = payPrice;
                vm.gatheringDialogVisible = true;
            },
            // 输入收款金额，确认收款
            sureGathering() {
                var methodName = "/vendor/ordermain/gathering";
                this.gatheringAjax(this.order.uuid, this.payPrice, methodName);
            },
            //取消
            cancel(payState, payType) {
                var title = '确定取消订单？';
                if (payState == 2 && payType == 3) {
                    title = '该订单已支付成功，取消将会产生退款，请确认？';
                    this.refundPrice = this.order.payPrice;
                    // 展示退款模态框
                    this.refundDialogVisible = true;
                } else {
                    this.$confirm(title, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        var methodName = "/vendor/ordermain/cancel";
                        this.doAjax(this.order.uuid, methodName);
                    })
                }

            },
            // 输入退款金额，确认退款
            sureRefund() {
                var methodName = "/vendor/ordermain/cancel";
                var refundMoney = $('#refundMoney').val();
                var orderUuid = $('#orderUuid2').val();
                this.refundAjax(orderUuid, refundMoney, methodName);
            },
            //接单
            receive(orderUuid) {
                this.$confirm('确定接单？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var methodName = "/vendor/ordermain/receive";
                    this.doAjax(orderUuid, methodName);
                })
            },

            //完成
            finish(orderUuid) {
                this.$confirm('确认完成订单？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var methodName = "/vendor/ordermain/finish";
                    this.doAjax(orderUuid, methodName);
                })
            },

            //派送
            delivery(orderUuid) {
                this.$confirm('确定派送订单？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var methodName = "/vendor/ordermain/delivery";
                    this.doAjax(orderUuid, methodName);
                })
            },
            //送达
            arrived(orderUuid) {
                this.$confirm('确定送达订单？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var methodName = "/vendor/ordermain/arrived";
                    this.doAjax(orderUuid, methodName);
                })
            },
            doAjax:function (orderUuid, methodName) {
                var params = {
                    "id": orderUuid
                };

                $.ajax({
                    url: methodName,
                    type: "POST",
                    data: params,
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode === 1) {
                            vm.$message({
                                message: data.returnNote,
                                type: 'success',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                            var result = data.returnMessage;
                            var order = vm.order;
                            order.state = result.state;
                            order.payState = result.payState;
                            order.stateName = result.stateName;
                            order.payStateName = result.payStateName;
                            order.payTime = result.payTime;
                            order.receiveTime = result.receiveTime;
                            order.deliveryTime = result.deliveryTime;
                            order.finishTime = result.finishTime;
                            order.freePrice = result.freePrice;
                            order.otherPrice = result.otherPrice;
                            order.payPrice = result.payPrice;
                            if(result.detailList){
                                for(var i=0;i<result.detailList.length;i++){
                                    var detail = result.detailList[i];
                                    for(var j=0;j<order.detailList.length;j++){
                                        var detail2 = order.detailList[j];
                                        if(detail.uuid == detail2.uuid){
                                            detail2.state = detail.state;
                                            detail2.stateName = detail.stateName;
                                            break;
                                        }
                                    }
                                }
                            }
                        } else {
                            vm.$message({
                                message: data.returnNote,
                                type: 'error',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                        }
                    }
                });
            },
            gatheringAjax:function (orderUuid, payMoney, methodName) {
                var params = {
                    "id": orderUuid,
                    "payMoney": parseFloat(payMoney),
                };

                $.ajax({
                    url: methodName,
                    type: "POST",
                    data: params,
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if (data && data.returnCode === 1) {
                            // 关闭收款模态框
                            vm.gatheringDialogVisible = false;
                            vm.$message({
                                message: data.returnNote,
                                type: 'success',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                            var result = data.returnMessage;
                            var order = vm.order;
                            order.state = result.state;
                            order.payState = result.payState;
                            order.stateName = result.stateName;
                            order.payStateName = result.payStateName;
                            order.payTime = result.payTime;
                            order.receiveTime = result.receiveTime;
                            order.deliveryTime = result.deliveryTime;
                            order.finishTime = result.finishTime;
                            order.freePrice = result.freePrice;
                            order.otherPrice = result.otherPrice;
                            order.payPrice = result.payPrice;
                            if(result.detailList){
                                for(var i=0;i<result.detailList.length;i++){
                                    var detail = result.detailList[i];
                                    for(var j=0;j<order.detailList.length;j++){
                                        var detail2 = order.detailList[j];
                                        if(detail.uuid == detail2.uuid){
                                            detail2.state = detail.state;
                                            detail2.stateName = detail.stateName;
                                            break;
                                        }
                                    }
                                }
                            }
                        } else {
                            vm.$message({
                                message: data.returnNote,
                                type: 'error',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                        }
                    }
                });
            },
            refundAjax:function (orderUuid, refundMoney, methodName) {
                var payMoney = vm.order.payMoney;
                if (refundMoney > payMoney) {
                    vm.$message({
                        message: '退款金额不能大于订单金额',
                        type: 'warning',
                        customClass: 'message-center',
                        duration: 1500,
                    });
                    return;
                }

                var params = {
                    "id": orderUuid,
                    "refundMoney": parseFloat(refundMoney)
                };

                $.ajax({
                    url: methodName,
                    type: "POST",
                    data: params,
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if (data && data.returnCode === 1) {
                            // 关闭退款模态框
                            vm.refundDialogVisible = false;
                            vm.$message({
                                message: data.returnNote,
                                type: 'success',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                            var result = data.returnMessage;
                            var order = vm.order;
                            order.state = result.state;
                            order.payState = result.payState;
                            order.stateName = result.stateName;
                            order.payStateName = result.payStateName;
                            order.payTime = result.payTime;
                            order.receiveTime = result.receiveTime;
                            order.deliveryTime = result.deliveryTime;
                            order.finishTime = result.finishTime;
                            order.freePrice = result.freePrice;
                            order.otherPrice = result.otherPrice;
                            order.payPrice = result.payPrice;
                            order.refundState = result.refundState;
                            order.refundStateName = result.refundStateName;
                        } else {
                            vm.$message({
                                message: data.returnNote,
                                type: 'error',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                        }
                    }
                });
            },
            copyUrl: function() {
                var box = document.getElementById("copytext");
                var selection = window.getSelection();
                var range = document.createRange();//创建一个选区
                range.selectNodeContents(box);
                selection.removeAllRanges();
                selection.addRange(range);//把当前div添加到选区,此时div会变蓝（选中状态）
                document.execCommand("copy");//这一步之后，div的innerHTML就放到剪贴板里面了，就可以粘贴了，不止可以在浏览器粘贴，在任何地方都可以。此方法的参数有好多种情况，可问度娘
                selection.removeAllRanges();//取消div的选中状态，免得看着那个地方蓝蓝的不好看
                this.$message({
                    message: '复制成功',
                    type: 'success'
                });
            },
            goBack:function () {
                history.back(-1);
            }
        }
    });
</script>
</body>
</html>